<template>
    <ContentWrap>
        <CardTitle title="Button 示例" />
        <div class="mt-20px">
            <code class="code-block">
            &lt;e-button&gt;按钮&lt;/e-button&gt;<br/>
            &lt;e-button type="primary"&gt;按钮1&lt;/e-button&gt;<br/>
            &lt;e-button type="success" size="small"&gt;按钮2&lt;/e-button&gt;<br/>
            &lt;e-button type="warning" size="large"&gt;按钮3&lt;/e-button&gt;<br/>
            &lt;e-button type="danger" size="default"&gt;按钮4&lt;/e-button&gt;<br/>
            &lt;e-button type="info" size="default"&gt;按钮5&lt;/e-button&gt;<br/>

            &lt;e-button type="primary" size="middle"&gt;按钮6&lt;/e-button&gt;<br/>
            &lt;e-button type="primary" size="large"&gt;按钮7&lt;/e-button&gt;
            </code> 


        </div>



        <CardTitle title="Button 属性" />
        <div class="mt-20px">
            <table class="properties-table">
                <tr>
                    <td>type</td>
                    <td>String</td>
                    <td>按钮类型</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>String</td>
                    <td>按钮大小</td>
                </tr>   
                <tr>
                    <td>icon</td>
                    <td>String</td>
                    <td>按钮图标</td>
                </tr>
                <tr>
                    <td>loading</td>    
                    <td>Boolean</td>
                    <td>是否加载中</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>是否禁用</td>
                </tr>
                <tr>
                    <td>preIcon</td>
                    <td>String</td>
                    <td>按钮前置图标</td>
                </tr>
                <tr>
                    <td>postIcon</td>
                    <td>String</td>
                    <td>按钮后置图标</td>
                </tr>
                <tr>
                    <td>plain</td>
                    <td>Boolean</td>
                    <td>是否朴素按钮</td>
                </tr>
                <tr>
                    <td>round</td>
                    <td>Boolean</td>
                    <td>是否圆角按钮</td>
                </tr>
                
                </table>

            </div>

        <div class="mt-20px">
            <e-button>按钮</e-button>
            <e-button type="primary">按钮1</e-button>
            <e-button type="success" size="small">按钮2</e-button>
            <e-button type="warning" size="large">按钮3</e-button>
            <e-button type="danger" size="default">按钮4</e-button>
            <e-button type="info" size="default">按钮5</e-button>

            <e-button type="primary" size="middle">按钮6</e-button>
            <e-button type="primary" size="large">按钮7</e-button>
        </div>
        
        
    </ContentWrap>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>